<template>
    <div class="popup-details">
        <div class="popup-audio">
            <div class="audio-play" :style="{backgroundImage: 'url('+about.image+')'}">
                <div class="bd" :class="{playing:progressData.playing}" @click="audioPlay(about.voice,about.name)">
                    <div class="play-mask "></div>
                </div>
            </div>
            <div class="right">
                <div class="name-wrap"><i>{{about.name}} </i><span v-if="about.level">{{about.level}}</span></div>
                <div class="progress-bottom">
                    <span class="current-time">{{progressData.currentTime | formatSecond }}</span>
                    <span class="duration-time">{{progressData.maxTime  | formatSecond }}</span>
                    <div>
                    <van-slider class="progress" v-model="progressData.value" :disabled="progressData.maxTime == 0" @change="onChange" :min="solid.min" :max="solid.max" >

                            <div    slot="button"    class="custom-button"  ></div>
                    </van-slider></div>
                </div>
            </div>
        </div>
        <div class="sceni-address-info" v-if="about.address">
            <p>地址：{{about.address}}</p>
            <p>时间：{{about.office_hours}}</p>
            <p>电话：{{about.telephone}}</p>
        </div>
        <div class="br" style="background: rgb(247, 247, 248); height:12px"></div>
        <div class="container">
            <div class="hd">
                <slot name="hd"></slot>
                <!-- 景区简介 -->
            </div>
            <div class="bd" v-html="about.intro"></div>
        </div>
    </div>
</template>

<script>
import {realFormatSecond} from '@/common/js/common'
export default {
    name: 'PopupDetails',
    components:{
        
    },
    props: {
        about:{
            type:Object,
            default:null
        },
        progressData:{
            type:Object,
            default:function(val) {
                return {
                    playing:false,
                    currentTime:0,
                    value:0,
                    maxTime:0
                }
            }
        }
    },
    data () {
        return {
            solid:{
                min:0,
                max:100
            }
        }
    },
    methods:{
        audioPlay (voice,name){
            this.$emit('voiceUrl',voice,name)
            // console.log('pop')
        },
        onChange(value){

            console.log('e:'+this.progressData.playing)
            let time=parseInt(value*this.progressData.maxTime/100)
            this.progressData.currentTime= time
            this.$emit('toTime',time)

            console.log('f:'+this.progressData.playing)
        }
    },
    filters:{

        formatSecond(second = 0) {
            // console.log(realFormatSecond)
            return realFormatSecond(second)
        }
    },
    watch:{
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.popup-details {
    .sceni-address-info {
        padding:17px ;
        p { line-height: 22px; }
    }
    .van-slider--disabled { opacity: 1; }
    .popup-audio {
        padding:18px 20px; overflow: hidden;
        .audio-play {
            float: left;position: relative; width: 75px; height:75px;  border-radius:50%; background-size: 100% 100%;
            .bd {
                position: absolute; width:67px; height:67px; background:rgba(0,0,0,.4); border-radius:50%; border:4px solid hsla(0,0,100%,.4);
                .play-mask { 
                    position: absolute; width:29px; height:29px; top: 50%; left:50%; border-radius:50%; transform: translate3d(-50%,-50%,0); background-color: hsla(0,0,100%,.4); 
                    &:after {content:''; position: absolute; width:100%; height:100%;   top: 50%; left:50%; background-image: url('../assets/images/icon_play.png');  transform: translate3d(-50%,-50%,0); background-repeat: no-repeat;    background-size: 40%;    background-position: center center;}
                }
                &.playing .play-mask:after{background-image: url('../assets/images/icon_playing.gif');}
            }
        }
        .right {
            margin-left: 75px; padding-left:15px;padding-top: 10px;
            .name-wrap { font-size: 16px; line-height: 20px; font-weight: 500; vertical-align: middle;
                i{display: inline-block;line-height: 16px;vertical-align: middle;}
                span{background: #ff6d00;display: inline-block; font-size: 10px; margin-left: 8px; padding:0 5px; line-height: 14px; color: #fff; border-radius:2Px;vertical-align: middle;} 
            }
            .progress-bottom { 
                margin-top: 30px; padding: 0 40px;  position: relative;
                .current-time, .duration-time{
                    font-size: 12px; color: #666;  position: absolute; left:0; top: -10px; line-height: 20px;
                }
                .duration-time { left:auto; right:0; }
                .custom-button { width:14px; height:14px; border-radius:50%; background-color: #fff; box-shadow: 0 0 3px 0 rgba(0,0,0,.2) }
            }
        }
    }

    .container { color: #000; 
        .hd { 
            padding: 20px 20px 10px;  position: relative; line-height: 20px; font-size: 14px;
            &:after { position: absolute;     content: "";    top: 25px;    left: 10px;    width: 3px;    height: 12px;    border-radius: 1px;    background-color: #3f85e7;}
        }
        .bd {
            padding: 0 20px 40px; line-height: 27px;
            img{ margin: 3px 0; }
        }
    }
}
</style>
